<template>
  <el-container style="min-height: 100vh">
    <el-aside :width="sideWidth + 'px'" style="box-shadow: 2px 0 6px rgb(48, 65, 86);">
      <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
               background-color="rgb(48, 65, 86)"
               text-color="#fff"
               active-text-color="#ffd04b"
               :collapse-transition="false"
               :collapse="isCollapse">
        <div style="height: 60px; line-height: 60px; text-align: center">
          <b style="color: white" v-show="logoTextShow">缺陷跟踪系统</b>
        </div>

        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-house"></i>
            <el-button type="text" @click="newD">首页</el-button>
          </template>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-house"></i>
            <el-button type="text" @click="projectMa">项目管理</el-button>
          </template>
          <!-- <el-menu-item-group title="分组1">
            <el-menu-item index="1-1">选项1</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-2">
            <template slot="title">选项2</template>
            <el-menu-item index="1-2-1">选项2-1</el-menu-item>
          </el-submenu> -->
        </el-submenu>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-aim"></i>
            <el-button type="text" @click="bugMa">bug管理</el-button>
          </template>
          <!-- <el-submenu index="2-1">
            <template slot="title">选项1</template>
            <el-menu-item index="2-1-1">选项1-1</el-menu-item>
          </el-submenu> -->
        </el-submenu>

        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-user"></i>
            <el-button type="text" @click="departmentMa">组织架构</el-button>
          </template>
          <!-- <el-submenu index="3-1">
            <template slot="title">选项1</template>
            <el-menu-item index="3-1-1">选项3-1</el-menu-item>
          </el-submenu> -->
        </el-submenu>

        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-message"></i>
            <el-button type="text" @click="dynamicMe">动态消息</el-button>
          </template>
          <!-- <el-menu-item-group title="分组1">
            <el-menu-item index="4-1">选项1</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="4-2">
            <template slot="title">选项2</template>
            <el-menu-item index="4-2-1">选项2-1</el-menu-item>
          </el-submenu> -->
        </el-submenu>

        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-message"></i>
            <el-button type="text" @click="rolePe">角色权限</el-button>
          </template>
          <!-- <el-menu-item-group title="分组1">
            <el-menu-item index="4-1">选项1</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="4-2">
            <template slot="title">选项2</template>
            <el-menu-item index="4-2-1">选项2-1</el-menu-item>
          </el-submenu> -->
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
        <el-header style="font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px; display: flex">
        <div style="flex: 1; font-size: 20px">
          <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
        </div>
        <el-dropdown style="width: 70px; cursor: pointer">
          <span>管理员</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
          <el-dropdown-menu slot="dropdown" >
            <el-dropdown-item style="font-size: 14px; padding: 5px 0">个人信息</el-dropdown-item>
            <el-dropdown-item style="font-size: 14px; padding: 5px 0">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-main>
      <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
 
<script>
export default {
  name: 'Home',
  data() {
    const item = {
      date: '2022-02-02',
      name: '小明',
      address: '广东省广州市花都区'
    };
    return {
      tableData: Array(10).fill(item),
      msg: "hello 小明",
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
      headerBg: 'headerBg'
    }
  },
  methods: {
    collapse() {  // 点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {  // 收缩
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false
      } else {   // 展开
        this.sideWidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }
    },
     newD(){
      console.log("即将跳转到首页"),
	    //这一步是为了验证是否跳转成功，如果成功就会打印，否则出错
	    this.$router.push({name: 'index'})
	    //这一步就是跳转语句，path是形参,在template里面应该写一个实参传参数引进来
    },
    projectMa(){
      console.log("即将跳转到项目管理页面"),
	    this.$router.push({name: 'projectMa'})
    },
    bugMa(){
      console.log("即将跳转到bug管理页面"),
	    this.$router.push({name: 'bugMa'})
    },
    departmentMa(){
      console.log("即将跳转到组织架构页面"),
	    this.$router.push({name: 'departmentMa'})
    },
    dynamicMe(){
      console.log("即将跳转到动态消息页面"),
	    this.$router.push({name: 'dynamicMe'})
    },
    rolePe(){
      console.log("即将跳转到角色权限页面"),
	    this.$router.push({name: 'rolePe'})
    }
  }
}
</script>
 
<style>
b{
  font-size: 1.5em;
}
.headerBg {
  background: #eee!important;
}
</style>